<template>
    <div class="testing">
        <div class="operation-heder-t">
            <HeadTop :title="headTitle"></HeadTop>
        </div>
        <div class="addFeed-con-msg">
            <van-dropdown-menu :change="valueChang()">
                <van-dropdown-item v-model="value" :options="opt" />
            </van-dropdown-menu>
        </div>
        <div class="select-time" @click="show = true">
            <img class="icon-time" src="../../../../assets/icon-time.png"/>
            <section v-if="startDate !== ''">{{startDate}} <span>至</span> {{endDate}}</section>
            <section v-else>全部</section>
        </div>
        <van-calendar ref="calendar" v-model="show" type="range" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate"/>
        <div class="testing-line"></div>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
            <div class="testing-table">
                <div class="testing-left">
                    <div>日期</div>
                    <div  v-for="(item, index) in dataType" :key="index" :class="{'one-line': (index + 1)%2 ===1}">{{item.date}}</div>
                </div>
                <div class="testing-list">
                    <div v-for="(item, index) in title" v-bind:key="index" >
                        <div>{{item.indicatorName}}</div>
                        <div v-for="(v, idx) in dataType" :key="idx"  :class="{'one-line': (idx + 1)%2 ===1}">{{v.indicators[index].value}}<span style="opacity: 0">1</span></div>
                    </div>
                </div>
            </div>

        </van-list>

    </div>
</template>

<script >
import { getFishTankSearchList, getIndicators, getIndicatorReportByFishTankId} from '../../../../api/index.js'
import HeadTop from '../../../../components/headTop3.vue'
import { getYYYYMMDD } from '../../../../api/unit.js'
export default {
  data () {
    return {
      headTitle: '水质监测报表',
      opt: [],
      value: void 0,
      show: false,
      minDate: new Date('1970-1-1'.toString()),
      maxDate: new Date(),
      startDate: '',
      endDate: '',
      title: [],
      loading: false,
      finished: false,
      page: 1,
      pageSize: 10,
      pageCount: 0,
      dataType: [],
      flag: false
    }
  },
  watch: {
    'value': function (value) {
      if (this.flag) {
        console.log(value)
        this.dataType = []
        this.page = 1
        this.getData()
      }
    }
  },
  methods: {
    onLoad () {
      setTimeout(() => {
        if (this.dataType.length < this.pageCount && this.pageCount > this.pageSize) {
          this.pageChange()
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.dataType.length >= this.pageCount) {
          this.finished = true
        }
      }, 1000)
    },
    onConfirm (date) {
      const [start, end] = date
      this.show = false
      this.startDate = getYYYYMMDD(date[0]).nTime
      this.endDate = getYYYYMMDD(date[1]).nTime
      this.page = 1
      this.dataType = []
      this.getData()
    },
    async initial () {
      let msg = await getFishTankSearchList('')
      msg.data.map(v => {
        v.text = v.tankName
        v.value = v.id
      })
      this.opt = msg.data
      this.value = msg.data[0].id

      let title = await getIndicators()
      this.title = title.data
      this.flag = true
      this.getData()
    },
    async getData () {
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        keyword: this.value
      }
      if (this.startDate !== '') {
        data.startDate = this.startDate
        data.endDate = this.endDate
      }
      let result = await getIndicatorReportByFishTankId(data)
      let dataType = this.dataType
      let msg = result.data.result
      msg.map(v => {
        dataType.push(v)
      })

      this.dataType = dataType
      this.pageCount = result.data.page.pageCount
    },
    valueChang () {

    }

  },
  mounted () {
    this.initial()
  },
  components: {
    HeadTop
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.testing
    .addFeed-con-msg
        width: 750px
        background: #fff
        border: 0 soild #fff
        display: flex
        align-items: center
        justify-content: center
        border: 20px soild red
        overflow: hidden
        height: 80px
        .van-dropdown-menu
            background: #fff
            text-align: center
    .select-time
        width:750px
        height: 110px
        color: #202020
        font-size: 32px
        display: flex
        justify-content: center
        align-items:center
        border-top:1px solid #D3D3D3
        .icon-time
            width: 35px
            height: 35px
            margin-right: 19px
        &>span
            color: #C3C3C3
            font-size: 26px
            margin: 0px 30px
    .testing-line
        width:624px
        margin-left: 62px
        border:1px solid rgba(0,0,0,1);
        opacity:0.14
    .title
        white-space: nowrap;
        overflow-y: auto;
        font-size: 30px
        /*width: 670px*/
        margin-left: 40px
        line-height: 90px
        &>div
            width:20%
            text-align: center;
            display: inline-block;
    .title-con
        color: #B3B3B3
    .title-msg1
        border-radius:10px;
        background: #FAF9F9
    .testing-table
        display: flex
        width: 670px
        margin-left: 40px
        
        .testing-left
            width: 145px
            font-size: 30px
            line-height: 90px
            border-top-left-radius 10px
            border-bottom-left-radius 10px
            &>div
                 width: 145px
                 display: inline-block;
                 height: 90px
                 text-align: center
            .one-line
               background: #FAF9F9
        .testing-list
            white-space: nowrap;
            overflow-y: auto;
            font-size: 30px
            width: 515px

            line-height: 90px
            &>div
                width: 135px
                display: inline-block;
                height: 90px
                text-align: center
            .one-line
                background: #FAF9F9
</style>
